<template>
  <div class="index">
    <div class="head">
      <el-card class="data">
        <p><el-button>导出Excel</el-button></p>
        <div class="onlineData">
          <div>
            <p>主播数量</p>
            <p style="border-bottom: 1px solid gainsboro">2518</p>
            <p>2021-08-24</p>
          </div>
        </div>
      </el-card>
      <el-card class="msg">
        <div class="path">
          <div>
            <p>上次登录地址</p>
            <p>2131</p>
            <p>2021-11-2</p>
          </div>
          <el-tooltip placement="top">
            <div slot="content">登录地址正常</div>
            <span style="font-size: 24px" class="el-icon-s-claim"></span>
          </el-tooltip>
          <el-tooltip v-if="false" placement="top">
            <div slot="content">登录地址发生变化<br />是否需要修改密码</div>
            <span style="font-size: 24px" class="el-icon-info"></span>
          </el-tooltip>
        </div>
        <div class="path">
          <div>
            <p>运营消息通知</p>
            <p>0</p>
          </div>
          <span
            style="font-size: 24px; cursor: pointer"
            class="el-icon-arrow-right"
          ></span>
        </div>
      </el-card>
    </div>
    <el-card style="margin-top: 30px">
      <el-radio-group style="margin-bottom: 10px" v-model="radioVal">
        <el-radio-button label="昨日收入榜"></el-radio-button>
        <el-radio-button label="昨日有效时长榜"></el-radio-button>
      </el-radio-group>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioVal: "昨日收入榜",
    };
  },
};
</script>

<style lang="less" scoped>
.index {
  margin: 30px;
  height: 100%;
  .head {
    display: flex;
    justify-content: space-between;
    .data {
      width: 75%;
      display: flex;
      flex-direction: column;
      .onlineData {
        display: flex;
        justify-content: space-between;
        div {
          width: 22%;
          display: flex;
          box-shadow: 2px 2px 0px gainsboro;
          border: 1px solid gainsboro;
          flex-direction: column;
          justify-content: space-around;
          padding: 5px;
          box-sizing: border-box;
          text-indent: 1em;
        }
      }
    }
    .msg {
      width: 20%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .path {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>